/**
 * @Version: v1.0.0
 * @Author: code1921
 * @CmpZhName: 图片适配器
 * @Description: 图片适配器组件
 * @Date: 2021/09/23 14:54
 */
<template>
  <div class="img-adapter-container">
    <div class="container">
      <div v-for="(item, inx) in imgList" :key="item.id" :class="[`item img-item-` + (inx + 1), item.loading ? 'loaded' : 'loading']">
        <img :src="item.loadError ? 'https://storyset.com/images/404/8.svg' : (item.download_url + (inx > 5 ? '1' : ''))" alt="图片" @load="imgLoaded($event,item)" @error="imgLoadError($event,item)">
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'ImgAdapter',
    data() {
      return {
        imgList:[],
      }
    },
    created() {
      this.initFetchImgSource()
    },
    methods: {
      // 请求图片资源
      initFetchImgSource() {
        fetch('http://picsum.photos/v2/list?limit=9')
          .then(res => res.json())
          .then(list => {
            console.log('我是图片资源数据 ****',list)
            this.imgList = list
          })
      },
      // 图片加载完成
      imgLoaded(event, item) {
        this.$set(item, 'loading', true)
      },
      // 图片加载出错
      imgLoadError(event, item) {
        console.log('event', event)
        this.$set(item, 'loadError', true)
      },
    }
  }
</script>

<style lang="scss" scoped>
@keyframes loading {
  0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}
  .img-adapter-container {
    height: 100%;
  }
  .container{
    display: inline-grid;
    grid-template-columns: 200px 200px 200px ;
    grid-template-rows: 200px 200px 200px; 
    border: 1px solid #58546b; 
  }

.item {
  text-align: center;
  border: 1px solid #58546b;
  position: relative;
  transition: .3s color, .3s border;
  &.loading::before {
    color: #403b3b;
    content: " ";
    height: 70px;
    width: 70px;
    font-size: 12px;
    position: absolute;
    top: calc(50% - 35px);
    left: calc(50% - 45px);
    border: 10px dotted currentcolor;
    border-radius: 50%;
    animation: 2s loading linear infinite;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.85;
    transition: all 3s;
    &:hover{
      object-fit: cover;
      opacity: 1;
    }
  }
}

.item-1 {
  background-color: #ef342a;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

</style>